<template>
  <header class="bg-white shadow-lg sticky top-0 z-50">
    <div class="w-full">
      <!-- 主导航栏 -->
      <div class="flex items-center justify-between h-16">
        <!-- Logo 和品牌名 -->
        <router-link to="/" class="flex items-center space-x-3 hover:opacity-80 transition-opacity">
          <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
            <i class="fas fa-tools text-white text-lg"></i>
          </div>
          <span class="text-xl font-bold text-gray-800">Markdown 工具箱</span>
        </router-link>

        <!-- 桌面端导航菜单 -->
        <nav class="hidden md:flex items-center space-x-8">
          <router-link 
            v-for="item in mainNavItems" 
            :key="item.name"
            :to="item.href"
            class="text-gray-600 hover:text-blue-600 font-medium transition-colors duration-200"
            active-class="text-blue-600"
          >
            <i :class="item.icon" class="mr-2"></i>
            {{ item.name }}
          </router-link>
        </nav>

        <!-- 移动端菜单按钮 -->
        <button 
          @click="toggleMobileMenu"
          class="md:hidden w-10 h-10 flex items-center justify-center rounded-lg hover:bg-gray-100 transition-colors"
        >
          <i class="fas fa-bars text-gray-600"></i>
        </button>
      </div>

      <!-- 工具滑动菜单栏 -->
      <div class="border-t border-gray-100">
        <div class="flex items-center py-3">
          <button 
            @click="scrollToolsLeft"
            class="flex-shrink-0 w-8 h-8 rounded-full bg-gray-100 hover:bg-gray-200 flex items-center justify-center mr-3 transition-colors"
          >
            <i class="fas fa-chevron-left text-gray-600 text-sm"></i>
          </button>
          
          <div 
            ref="toolsContainer"
            class="flex-1 overflow-x-auto scrollbar-hide scroll-smooth"
            style="scrollbar-width: none; -ms-overflow-style: none;"
          >
            <div class="flex space-x-4 pb-1">
              <router-link
                v-for="tool in toolNavItems"
                :key="tool.id"
                :to="tool.route"
                class="flex-shrink-0 flex items-center space-x-2 px-4 py-2 rounded-full border-2 border-transparent hover:border-gray-200 transition-all duration-200"
                active-class="border-blue-200 bg-blue-50"
              >
                <div :class="[tool.color, 'w-6 h-6 rounded-full flex items-center justify-center']">
                  <i :class="tool.icon" class="text-white text-xs"></i>
                </div>
                <span class="text-sm font-medium text-gray-700 whitespace-nowrap">{{ tool.title }}</span>
              </router-link>
            </div>
          </div>
          
          <button 
            @click="scrollToolsRight"
            class="flex-shrink-0 w-8 h-8 rounded-full bg-gray-100 hover:bg-gray-200 flex items-center justify-center ml-3 transition-colors"
          >
            <i class="fas fa-chevron-right text-gray-600 text-sm"></i>
          </button>
        </div>
      </div>
    </div>

    <!-- 移动端菜单 -->
    <div 
      v-show="showMobileMenu"
      class="md:hidden bg-white border-t border-gray-100"
    >
      <nav class="w-full py-4">
        <router-link
          v-for="item in mainNavItems"
          :key="item.name"
          :to="item.href"
          @click="closeMobileMenu"
          class="flex items-center space-x-3 py-3 text-gray-600 hover:text-blue-600 transition-colors"
        >
          <i :class="item.icon"></i>
          <span>{{ item.name }}</span>
        </router-link>
      </nav>
    </div>
  </header>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const showMobileMenu = ref(false)
const toolsContainer = ref<HTMLElement | null>(null)

// 主导航菜单项
const mainNavItems = [
  {
    name: '首页',
    href: '/',
    icon: 'fas fa-home'
  },
  {
    name: '工具',
    href: '/tools',
    icon: 'fas fa-tools'
  },
  {
    name: '帮助',
    href: '/help',
    icon: 'fas fa-question-circle'
  },
  {
    name: '关于',
    href: '/about',
    icon: 'fas fa-info-circle'
  }
]

// 工具导航菜单项
const toolNavItems = [
  {
    id: 'mindmap',
    title: '思维导图',
    icon: 'fas fa-sitemap',
    color: 'bg-blue-500',
    route: '/tools/mindmap'
  },
  {
    id: 'flowchart',
    title: 'Mermaid 流程图',
    icon: 'fas fa-project-diagram',
    color: 'bg-green-500',
    route: '/tools/flowchart'
  },
  {
    id: 'presentation',
    title: 'PPT 演示文稿',
    icon: 'fas fa-presentation',
    color: 'bg-purple-500',
    route: '/tools/presentation'
  },
  {
    id: 'html',
    title: 'HTML 网页',
    icon: 'fab fa-html5',
    color: 'bg-orange-500',
    route: '/tools/html'
  },
  {
    id: 'diagram',
    title: '实例图表',
    icon: 'fas fa-chart-network',
    color: 'bg-pink-500',
    route: '/tools/diagram'
  },
  {
    id: 'pdf',
    title: 'PDF 文档',
    icon: 'fas fa-file-pdf',
    color: 'bg-red-500',
    route: '/tools/pdf'
  }
]

// 切换移动端菜单
function toggleMobileMenu() {
  showMobileMenu.value = !showMobileMenu.value
}

// 关闭移动端菜单
function closeMobileMenu() {
  showMobileMenu.value = false
}

// 工具菜单左滑
function scrollToolsLeft() {
  if (toolsContainer.value) {
    toolsContainer.value.scrollBy({
      left: -200,
      behavior: 'smooth'
    })
  }
}

// 工具菜单右滑
function scrollToolsRight() {
  if (toolsContainer.value) {
    toolsContainer.value.scrollBy({
      left: 200,
      behavior: 'smooth'
    })
  }
}

// 监听路由变化，关闭移动端菜单
watch(() => route.path, () => {
  showMobileMenu.value = false
})
</script>

<style scoped>
/* 隐藏滚动条但保持滚动功能 */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
</style> 